import {
  Button, Form, Input, notification, Tooltip, Upload,
} from 'antd'
import React, { PureComponent } from 'react'
import { UploadOutlined } from '@ant-design/icons'
import { testHiveConnection } from '../api'
import JSEncrypt from '@/utils/JSEncrypt.js'
import { SUAN_PAN } from '@/utils/https'

const { Item } = Form
const { TextArea } = Input

export default class Hive extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  testStorageFn = () => {
    const {
      form, id, clearTable, isCheck, data,
    } = this.props
    form.current.validateFields().then(values => {
      this.setState({
        loading: true,
      })
      const pass = isCheck || values.password === '******' ? data.password : JSEncrypt(values.password)
      testHiveConnection({
        password: pass,
        dsLink: values.dsLink,
        dsType: values.dsType,
        username: values.username,
        hiveSiteAddress: values.hiveSiteAddress,
        id,
      }).then((res) => {
        if (res.status === 200) {
          clearTable()
          notification.success({
            message: '连接测试',
            description: res.msg,
          })
          this.setState({
            loading: false,
          })
        } else {
          clearTable()
          notification.error({
            message: '连接测试',
            description: res.msg,
          })
          this.setState({
            loading: false,
          })
        }
      })
    })
  }

  handleChange = info => {
    const { form } = this.props
    let fileList = [...info.fileList]

    // 1. Limit the number of uploaded files
    // Only to show two recent uploaded files, and old ones will be replaced by the new
    fileList = fileList.slice(-2)

    // 2. Read from response and show file link
    fileList = fileList.map(file => {
      if (file.response) {
        file.url = file.response.url
      }
      return file
    })
    if (info.file.response && info.file.response.status === 200) {
      form.current.setFieldsValue({
        hiveSiteAddress: info.file.response.data.filePath,
        originalFilename: info.file.response.data.originalFilename,
      })
    }

    this.setState({ fileList: [fileList[fileList.length - 1]] })
  };

  render() {
    const {
      isCheck, fileList, index, form,
    } = this.props
    const props = {
      accept: '.xml',
      name: 'file',
      action: `${SUAN_PAN}/api/v1/normalization/datasource/uploadHiveSiteFile`,
      onChange: this.handleChange,
      multiple: true,
      showUploadList: { showRemoveIcon: false },
    }
    return (
      <div>
        <Item
          label="数据源名称"
          name="dsName"
          rules={[{ required: true, message: '请输入数据源名称' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据源名称"
          />
        </Item>
        <Item
          label="数据源描述"
          name="dsDesc"
          rules={[{ required: false }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据源描述"
          />
        </Item>
        <Item
          label="服务器"
          name="server"
          rules={[{ required: true, message: '请输入主机或ip名称' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入主机或ip名称"
          />
        </Item>
        <Item
          label="端口"
          name="port"
          rules={[{ required: true, message: '请输入端口' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入端口"
          />
        </Item>
        <Item
          label={<span>数据库 <Tooltip placement="right" title="可执行 show databases 命令查看已经建立的数据库"><i className="iconfont icon-yiwentishi" /></Tooltip></span>}
          name="dbName"
          rules={[{ required: true, message: '请输入数据库' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据库"
          />
        </Item>
        <Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入用户名"
          />
        </Item>
        <Item
          label="密码"
          name="password"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input.Password
            visibilityToggle={index === 0}
            disabled={isCheck}
            autoComplete="new-password"
            placeholder="请输入密码"
            onFocus={() => {
              if (form.current.getFieldValue('password') === '******') {
                form.current.setFieldsValue({
                  password: undefined,
                })
              }
            }}
          />
        </Item>
        <Item
          label="链接属性"
          name="connectionProperty"
        >
          <TextArea disabled={isCheck} rows={4} placeholder="请输入链接属性" />
        </Item>
        <Item
          label="链接信息"
          name="dsLink"
          // initialValue="jdbc:hive2://:/"
        >
          <Input
            disabled
            placeholder="请输入链接信息"
          />
        </Item>
        <Item
          label="hive-site"
          name="files"
          rules={[{ required: true, message: '请上传hive-site.xml文件' }]}
        >
          <Upload disabled={isCheck} {...props} fileList={this.state.fileList ? this.state.fileList : fileList} listType="picture">
            <Button disabled={isCheck} icon={<UploadOutlined />}>点击上传hive-site.xml</Button>
          </Upload>
        </Item>
        <Item
          style={{ display: 'none' }}
          label=""
          name="hiveSiteAddress"
        />
        <Item
          style={{ display: 'none' }}
          label=""
          name="originalFilename"
        />
        <Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button onClick={this.testStorageFn} loading={this.state.loading} type="primary">连接测试</Button>
        </Item>
      </div>
    )
  }
}
